<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
<div id="app">

    <!--
        需求：点击某一项，该项变红
    -->
    <ul>
        <li v-on:click="currentIndex = index"
            v-bind:class="{active: index === currentIndex}"
            v-for="(item,index) in movies">{{index + "-" + item}}</li>
    </ul>
    <hr>
    <ul>
        <li v-on:click="changeColor(index)"
            v-bind:class="{active: index === currentIndex}"
            v-for="(item,index) in movies">{{index + "-" + item}}</li>
    </ul>

</div>


<script src="../../js/vue.js"></script>

<script>
    const vue = new Vue({
        el: "#app",
        data: {
            movies: ["火影忍者","海贼王","秦时明月","七龙珠"],
            isActive: false,
            currentIndex: 100
        },
        methods: {
            changeColor: function (index) {
                this.currentIndex = index;
            }
        }
    });
</script>
</body>
</html>